<template>
	<view class="form">
		<view class="form-content">
			<view class="left" v-if="type === 2">
				<scroll-view scroll-y="true" class="h-100">
					<view v-for="(item, key) in commonForm" :key="key" class="list" v-text="item.name" :class="{active: item.active}" @click="$store.commit('changeCommonFormType', key)"></view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" class="h-100">
					<u--form labelPosition="left" :labelWidth="type === 1 ? 120 :80" labelAlign="right" :labelStyle="{color: '#919296', paddingRight: '20rpx'}">
						<u-form-item :label="item.name" borderBottom v-for="(item, key) in currentType.form" :key="key">
							<u--input v-if="item.type === 'input'" v-model="item.value" border="none" :placeholder="`请输入${item.name}`"></u--input>
							<u-upload v-if="item.type === 'upload'" @afterRead="uploadFile($event, item.value)" @delete="deleteFile($event, item.value)" :fileList="item.value" multiple :previewFullImage="true"></u-upload>
						</u-form-item>
						<u-form-item label="经纬度信息" borderBottom v-if="currentType.needQrcode">
							<view class="jwd">
								<template v-if="qrcodeInfo.length > 0">
									<view class="l" v-for="(item, key) in qrcodeInfo" :key="key">
										<text>{{item.longtude}},{{item.latitude}}</text>
										<u-icon @click="qrcodeInfo.splice(key, 1)" name="close-circle-fill" color="#f00f00" size="20"></u-icon>
									</view>
								</template>
								<text v-else>无</text>
							</view>
						</u-form-item>
					</u--form>
				</scroll-view>
			</view>
		</view>
		<view class="form-bottom">
			<u-button type="info" @click="goBack">取消</u-button>
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<view class="qrcode" v-if="currentType.needQrcode">
			<image src="../../static/images/qrcode.png" mode="widthFix" @click="goQrcode"></image>
		</view>
	</view>
</template>

<script>
	import common from '../../common/js/common.js'
	export default{
		data() {
			return {
				qrcodeInfo: []
			}
		},
		computed: {
			currentType() {
				return this.$store.state.currentType
			},
			type() {
				return this.$store.state.currentType.type
			},
			commonForm() {
				return this.$store.state.commonForm
			},
		},
		methods: {
			submit() {
				let formObj = {}
				const setFormObj = (row) => {
					if (!row) return
					row.form.forEach(v => {
						formObj[v.prop] = v.value
						if (v.type === 'upload') formObj[v.prop] = v.value.map(v => v.url).join(',')
					})
				}
				if (this.currentType.type === 1) setFormObj(this.currentType) 
				else {
					this.commonForm.forEach(row => {
						setFormObj(row)
					})
				}
				common.request({
					url: this.$serverUrl + this.currentType.api,
					type: 'post',
					params: this.currentType.needQrcode ? {
						...this.currentType.extraData,
						...formObj,
						trails: JSON.stringify(this.qrcodeInfo)
					} : {
						...this.currentType.extraData,
						...formObj
					}
				}, () => {
					common.toast('巡查成功')
					this.$store.commit('resetCurrentValue')
					setTimeout(() => this.goBack(), 1000)
				})
			},
			uploadFile(e, row) {
				uni.uploadFile({
					url: this.$serverUrl + '/manage/anony/app/upload',
					filePath: e.file[0].url,
					name: 'file',
					success: res => {
						row.push({url: JSON.parse(res.data).data})
					},
					fail: err => {
						common.request('上传失败，请重新上传')
					}
				});
				
			},
			deleteFile(e, row) {
				row.splice(e.index, 1)
			},
			goQrcode() {
				uni.scanCode({
					success: res => {
						let info = `\{${res.result}\}`
						info = info.replace('longtude', '\"longtude\"').replace('latitude', '\"latitude\"').replace(/\'/g, '\"')
						this.qrcodeInfo.push(JSON.parse(info))
					}
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../common/style/main.less';
	.form {
		@bottomH: 120rpx;
		height: 100%;
		.form-content {
			@lw: 250rpx;
			display: flex;
			height: calc(100% - @bottomH - 2rpx);
			overflow: hidden;
			.left {
				width: @lw;
				max-width: @lw;
				min-width: @lw;
				height: 100%;
				border-right: 2rpx solid #eeeeee;
				.list {
					text-align: center;
					padding: 20rpx;
					border-bottom: 2rpx solid #eeeeee;
					&.active {
						background-color: @main-color;
						color: #ffffff;
					}
				}
			}
			.right {
				flex: 1;
				padding: 20rpx;
				height: calc(100% - 40rpx);
				/deep/ .u-form {
					width: 100%;
					padding-bottom: 10rpx;
					.jwd {
						.l {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							color: @main-color;
							text {
								display: block;
								margin-right: 10rpx;
								word-wrap: break-word;
								word-break: break-all;
							}
							&:last-child {
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
		.form-bottom {
			height: @bottomH;
			padding: 0 30rpx;
			border-top: 2rpx solid #eeeeee;
			display: flex;
			align-items: center;
			/deep/ .u-button {
				flex: 1;
				&:last-child {
					margin-left: 20rpx;
				}
			}
		}
		.qrcode {
			position: fixed;
			width: 100rpx;
			right: 40rpx;
			bottom: 300rpx;
			z-index: 99;
		}
	}
</style>